<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>相对定位</title>
		<style>
			
			* {
				padding: 0;
				margin: 0;
			}

			.red {
				width: 200px;
				height: 200px;
				border: 2px solid black;
				background-color: red;

				margin: 0 auto;

				/* 
					相对定位 
					相对于元素本身所在的位置进行定位, 并不会改变元素本身的特性
				*/
				position: relative;
				/*top: 50px;*/

				bottom: 150px;
				
			}

			.blue {
				width: 300px;
				height: 300px;
				background: blue;
				border: 2px solid black;
			}

		</style>
	</head>
	<body>

		<div class="red"></div>
		<div class="blue"></div>
		
	</body>
</html>